<template>
    <div>
       <orderBox :boxData="boxData" ></orderBox>
        <el-row :gutter="20" style="margin-top: 20px">
            <boxView :boxData="financial" :spanVal="12"></boxView>
            <boxView :boxData="orderData" :spanVal="12"></boxView>
        </el-row>
        <el-row style="margin-top: 20px;" :gutter="20">
            <el-col :span="24">
                <lineCharts :nameList="nameList" :saleList="saleList" v-if="nameList.length != 0"></lineCharts>
            </el-col>
        </el-row>
    </div>
</template>
<script>
    import orderBox from '@/components/index/orderBox.vue'
    import boxView from '@/components/index/boxView.vue'
    import lineCharts from '@/components/lineCharts.vue'
    export default ({
        name:'index',
        components:{orderBox,boxView,lineCharts},
        data(){
            return {
                boxData:[],
                nameList:[],
                saleList:[],
                financial:{
                    title:'实时营业额',
                    data:0,
                    list:[
                        {
                            text:'昨日收益',
                            list_data:0
                        },
                        {
                            text:'本月收益',
                            list_data:0
                        },{
                            text:'累计收益',
                            list_data:0
                        }
                    ]
                },
                orderData:{
                    title:'实时订单数',
                    data:0,
                    list:[
                        {
                            text:'昨日订单数',
                            list_data:0
                        },
                        {
                            text:'本月订单数',
                            list_data:0
                        },{
                            text:'累计订单数',
                            list_data:0
                        }
                    ]
                },
                nowTimestamp:'',
                monthTimestamp:'',
                allTimestamp:'',
                todayTimestamp:'',
                yesterdayTimestamp:''
            }
        },
        created(){
            this.getSalesVolume();
            this.getOrderNum();
            this.getTimestamp();
            this.getFinancial(this.todayTimestamp,this.nowTimestamp,'today');
            this.getFinancial(this.yesterdayTimestamp,this.todayTimestamp,'yesterday');
            this.getFinancial(this.monthTimestamp,this.nowTimestamp,'month');
            this.getFinancial(this.allTimestamp,this.nowTimestamp,'all');
            this.getOrderDate(this.todayTimestamp,this.nowTimestamp,'today');
            this.getOrderDate(this.yesterdayTimestamp,this.todayTimestamp,'yesterday');
            this.getOrderDate(this.monthTimestamp,this.nowTimestamp,'month');
            this.getOrderDate(this.allTimestamp,this.nowTimestamp,'all');
        },
        methods:{
            async getOrderNum(){
                let res = await this.$Http.getOrderNum({
                    supplier_id:this.$store.state.supplier_id
                })
                this.boxData = [
                    {
                        id:0,
                        data:res.zero_num,
                        text:'待付款',
                        icon:'el-icon-money',
                        text_color:'info-color',
                        bg_color:'info'
                    },
                    {
                        id:1,
                        data:res.one_num,
                        text:'待发货',
                        icon:'el-icon-s-order',
                        text_color:'priamy-color',
                        bg_color:'priamy'
                    },
                    {
                        id:2,
                        data:res.two_num,
                        text:'待收货',
                        icon:'el-icon-truck',
                        text_color:'warning-color',
                        bg_color:'warning'
                    },
                    {
                        id:3,
                        data:res.three_num,
                        text:'已完成',
                        icon:'el-icon-finished',
                        text_color:'success-color',
                        bg_color:'success'
                    }
                ]
            },
            async getOrderDate(start,end,type){
                let res = await this.$Http.getOrder({
                    supplier_id:this.$store.state.supplier_id,
                    status:10,
                    start_time:start,
                    end_time:end,
                })
                if(type == 'today'){
                    this.orderData.data = res.count
                }
                if(type == 'yesterday'){
                    this.orderData.list[0].list_data = res.count;
                }
                if(type == 'month'){
                    this.orderData.list[1].list_data = res.count;
                }
                if(type == 'all'){
                    this.orderData.list[2].list_data = res.count;
                }
            },
            getTimestamp(){
                let date = new Date();
                let year = date.getFullYear();
                let month = date.getMonth()+1;
                month = this.$util.checkTime(month);
                let day = this.$util.checkTime(date.getDate());
                let now = Math.round(new Date()/1000);
                let todayTime = `${year}-${month}-${day} 00:00:00`;
                let day1 = new Date();
                day1.setTime(day1.getTime()-24*60*60*1000);
                let yesterday = `${day1.getFullYear()}-${this.$util.checkTime(day1.getMonth()+1)}-${this.$util.checkTime(day1.getDate())} 00:00:00`
                let monthTime = `${year}-${month}-01 00:00:00`;
                let allTime = '2020-01-01 00:00:00';
                this.nowTimestamp = now;
                this.todayTimestamp = this.$util.timeToTimestamp(todayTime);
                this.monthTimestamp = this.$util.timeToTimestamp(monthTime);
                this.allTimestamp = this.$util.timeToTimestamp(allTime);
                this.yesterdayTimestamp = this.$util.timeToTimestamp(yesterday);
            },
            async getFinancial(start,end,type){
                let res = await this.$Http.getTimeFinancial({
                    supplier_id: this.$store.state.supplier_id,
                    start_time:start,
                    end_time:end
                })
                if(type == 'today'){
                    this.financial.data = res.num
                }
                if(type == 'yesterday'){
                    this.financial.list[0].list_data = res.num;
                }
                if(type == 'month'){
                    this.financial.list[1].list_data = res.num;
                }
                if(type == 'all'){
                    this.financial.list[2].list_data = res.num;
                }
            },
            async getSalesVolume(){
                let res = await this.$Http.getSalesVolume({
                    supplier_id:this.$store.state.supplier_id
                })
                // console.log(res);
                let nameList = [];
                let saleList = [];
                for(let i in res){
                    nameList.push(res[i].product_name);
                    saleList.push(res[i].buy_num);
                }
                this.nameList = nameList;
                this.saleList = saleList;
            }
        }
    })
</script>
<style scoped>
    .charts{
        background-color: #fff;

    }
</style>
